<!--
 * @Author: wang
 * @Date: 2020-09-22 18:05:20
 * @LastEditTime: 2020-08-13 09:16:04
 * @LastEditors: wang
 * @Description: 应急调度 设置受灾点弹窗
 * @FilePath: \c-u-f\src\App.vue
-->
<template>
  <div :class="themeClass">
    <div class="pop_up_box">
      <div class="close_btn" @click="closedispatch(1)">
        <img src="@/assets/images/close_btn2.png" v-if="theme == 'dark'" />
        <img src="@/assets/images/b_close_btn2.png" v-else />
      </div>
      <div class="input_box">
        <div class="input_item" style="margin-top:1px;">
          <div class="input_label">受灾点名称</div>
          <div class="input_bj">
            <input type="text" placeholder="请输入名称" :disabled="this.id ? true : false" v-model="detail.name" maxlength="12"/>
          </div>
        </div>
        <div class="input_item">
          <div class="input_label">受灾点地点</div>
          <div class="input_bj">
            <input type="text" placeholder="请输入地点" :disabled="this.id ? true : false" v-model="detail.address" />
          </div>
        </div>
        <div class="input_item">
          <div class="input_label">受灾点面积</div>
          <div class="input_bj">
            <input type="text" placeholder="请输入数字" :disabled="this.id ? true : false" v-model.number="detail.area" @blur="getarea" maxlength="10" />
          </div>
        </div>
        <div class="input_item">
          <div class="input_label">受灾点人数</div>
          <div class="input_bj">
            <input type="text" placeholder="请输入数字" :disabled="this.id ? true : false" v-model.number="detail.affectedCount" @blur="getaffectedCount" maxlength="9" />
          </div>
        </div>
        <div class="input_item">
          <div class="input_label">地区人口数</div>
          <div class="input_bj">
            <input type="text" placeholder="请输入数字" :disabled="this.id ? true : false" @blur="getpeopleCount" v-model.number="detail.peopleCount" maxlength="9" />
          </div>
        </div>
      </div>
      <div>
        <div class="dispatch Unscheduled" v-if="detail.status === 0">应急资源还未调度!</div>
        <div class="dispatch Scheduled" v-if="detail.status === 1">应急资源已调度!</div>
      </div>

      <div class="btn_box">
        <div class="btn_bj" style="line-height:36px;" @click="closedispatch(2)">消除</div>
        <div class="btn_bj dispatch_btn" @click="dispatch">调度</div>
      </div>
      <!-- <div class="btn_box" v-else>
        <div class="btn_bj" style="line-height:36px;">取消</div>
        <div class="btn_bj dispatch_btn">确认</div>
      </div> -->
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { getAffectedPointDetails } from '@/api/index'
export default {
  props: {
    type: {
      type: Number
    },
    maptype: {
      type: Number
    },
    attr: {
      type: Object,
      require: true
    }
  },
  watch: {
    attr: {
      handler (newval, oldval) {
        this.id = newval.id
        localStorage.setItem(
          'szdObj',
          JSON.stringify({
            ...newval
          })
        )
        this.getdatail()
      },
      deep: true
    }
  },
  data () {
    return {
      top: 0,
      left: 0,
      show: false,
      currTag: '',
      detail: {},
      id: '',
      currAttrs: {}
    }
  },
  mounted () {
    this.id = this.attr.id
    localStorage.setItem('szdObj', JSON.stringify(this.attr))
    this.getdatail()
  },
  computed: {
    ...mapState(['theme']),
    themeClass () {
      return `theme-${this.theme}`
    }
  },
  methods: {
    dispatch () {
      if (this.maptype) {
        if (!this.detail.name) {
          this.$Message.warning('受灾点名称不能为空')
          return
        }
        if (!this.detail.address) {
          this.$Message.warning('受灾点地点不能为空')
          return
        }
        if (!this.detail.area) {
          this.$Message.warning('受灾点面积不能为空')
          return
        }
        if (!this.detail.affectedCount) {
          this.$Message.warning('受灾点人数不能为空')
          return
        }
        if (!this.detail.peopleCount) {
          this.$Message.warning('地区人口数不能为空')
          return
        }
        this.$emit('showlist2', this.detail, 1)
      } else {
        this.$emit('showlist2', this.detail, 2)
      }
    },
    closedispatch (type) {
      this.$emit('dclose', type, this.detail)
    },
    getdatail () {
      localStorage.setItem('id', this.id)
      getAffectedPointDetails({ id: this.id }).then(res => {
        if (res.code === 200) {
          this.detail = res.result
          this.$bus.$emit('szdPointDetail', {
            ...res.result,
            x: this.attr.x,
            y: this.attr.y
          })
        }
      })
    },
    getarea () {
      console.log(typeof this.detail.area)
      if (this.detail.area) {
        if (typeof this.detail.area === 'number') {
          if (this.detail.area <= 0) {
            this.detail.area = ''
            this.$Message.warning('受灾点面积不能小于等于0')
            // return
          }
        } else {
          this.detail.area = ''
          this.$Message.warning('受灾点面积只能输入数字')
        }
      }
    },
    getaffectedCount () {
      if (this.detail.affectedCount) {
        if (typeof this.detail.affectedCount === 'number') {
          if (this.detail.affectedCount <= 0) {
            this.detail.affectedCount = ''
            this.$Message.warning('受灾点人数不能小于等于0')
            // return
          }
        } else {
          this.detail.affectedCount = ''
          this.$Message.warning('受灾点人数只能输入数字')
        }
      }
    },
    getpeopleCount () {
      if (this.detail.peopleCount) {
        if (typeof this.detail.peopleCount === 'number') {
          if (this.detail.peopleCount <= 0) {
            this.detail.peopleCount = ''
            this.$Message.warning('地区人口数不能小于等于0')
            // return
          }
        } else {
          this.detail.peopleCount = ''
          this.$Message.warning('地区人口数只能输入数字')
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/index.scss';
.base-popup-content {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  height: 320px;
  width: 290px;
  z-index: 999;
}
.pop_up_box {
  width: 290px;
  max-height: 408px;
  background-size: 100% 100%;
   background-repeat:no-repeat;
  padding-top: 1px;
  @include themify($themes) {
    background-image: themed('popup_bj');
  }
}
.close_btn {
  margin-top: 11px;
  text-align: right;
  margin-right: 10px;
}
.input_item {
  width: 100%;
  margin-top: 20px;
  display: flex;
}
.input_label {
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 600;
  line-height: 33px;
  // opacity: 0.5;
  margin: 0 16px;
  @include themify($themes) {
    color: themed('input_label');
  }
}
.input_bj {
  width: 140px;
  height: 33px;
  background-size: cover;
  box-sizing: border-box;
  padding-top: 5px;
  padding-left: 8px;
  @include themify($themes) {
    background-image: themed('input_bj');
  }
}
.input_bj input {
  width: 92%;
  height: 26px;
  line-height: 26px;
  border: none;
  background: none;
  outline: none;
  font-size: 14px;
  @include themify($themes) {
    color: themed('input_color');
  }
}
.dispatch {
  width: 245px;
  height: 40px;
  margin: 0 auto;
  margin-top: 16px;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 600;
  line-height: 40px;
  text-align: center;
  letter-spacing: 3px;
}
.Unscheduled {
  color: #ff5b66;
  background: rgba(255, 91, 102, 0.1);
}
.Scheduled {
  color: #54ff88;
  background: rgba(84, 255, 136, 0.1);
}
.btn_box {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  padding: 20px;
  justify-content: space-between;
}
.btn_bj {
  width: 100px;
  height: 32px;
  line-height: 31px;
  text-align: center;
  font-size: 18px;
  background-size: cover;
  cursor: pointer;
  // color: #59aaca;
  @include themify($themes) {
    background-image: themed('eliminate_bj');
    color: themed('eliminate_font');
  }
}
.dispatch_btn {
  height: 30px;
  background-size: 100%;
  margin-top: 2px;
  @include themify($themes) {
    background-image: themed('dispatch_btn_bj');
    color: themed('dispatch_font');
  }
}
</style>
